require('js/common/jquery-ui-1.10.4.custom');

$(function () {
    //添加图片
    $('#ds-upload').on('click', function (event) {
        $('#f-upload').trigger('click');
    });

    //添加图片：选择素材
    $('.ds-meta').on('click', 'img', function (event) {
        event.preventDefault();

        $('.ds-imgup')[0].src = this.src;
        $('.ds-imgup').resizable({
            containment: ".ds-imgup-wrap"
        });
        $('.ui-wrapper').draggable({
            containment: ".ds-imgup-wrap"
        });
    });

    //换一批
    $('.ds-switch').on('click', function (event) {
        event.preventDefault();

        $.ajax({
            url: '/path/to/file',
            type: 'GET',
            dataType: 'json'
        })
            .done(function (data) {
                data.forEach(function (el, index) {
                    $('.ds-meta img').get(index).src = el.src;
                });
            })
            .fail(function () {
                console.log("error");
            })
            .always(function () {
                console.log("complete");
            });

    });


        var imgURL = '';

        //添加图片：上传图片
        $('#f-upload').on('change', function (event) {
            var file = event.target.files[0];
            if (!!file) {
                var fileReader = new FileReader();
                fileReader.onload = function (e) {
                    imgURL = this.result;
                    $('.ds-imgup')[0].src = e.target.result;
                    $('.ds-imgup').resizable({
                        containment: ".ds-imgup-wrap"
                    });
                    $('.ui-wrapper').draggable({
                        containment: ".ds-imgup-wrap"
                    });
                };

                fileReader.readAsDataURL(file);
            }
        });

        //保存按钮
        $('#ds-save').on('click', function (event) {
            event.preventDefault();

            //绘制上传图片并保存
            var wholeCanvas = document.getElementById('cv-whole'),
                wholeContext = wholeCanvas.getContext('2d'),
                partCanvas = document.getElementById('cv-part'),
                partContext = partCanvas.getContext('2d');
            var img = new Image();
            var curImg = $('.ds-imgup'),
                curHeight = curImg.height(),
                curWidth = curImg.width(),
                offsetX = curImg.position().left,
                offsetY = curImg.position().top;
            var proImg = new Image();
            var saved = '',
                b64 = '';
            img.src = imgURL;
            proImg.src = 'http://local.dev.com/images/t-prototype.jpg';


            //canvas初始化
            wholeContext.clearRect(0, 0, 541, 615);
            partContext.clearRect(0, 0, 200, 300);
            //将图片在partCanvas中绘制
            partContext.drawImage(img, 0, 0, offsetX, offsetY);
            //将图片在wholeCanvas中绘制
            wholeContext.drawImage(proImg, 0, 0, 541, 615);
            wholeContext.drawImage(img, offsetX + 162, offsetY + 120, curWidth, curHeight);

            $('#zhezhao').show();
            $('.add-desc').show();
        });
        
        //发布按钮
        $('.ds-finish').on('click', function (event) {
            event.preventDefault();
            var t = document.getElementById('ds-sort');
            var desc = $('.ds-desc').val(),
                head = document.getElementById('ds-head').value,
                sort = t.value,
                wholeImg = document.getElementById('cv-whole').toDataURL("image/png").substr(22),
                partImg = document.getElementById('cv-part').toDataURL("image/png").substr(22);

            //canvas导出图片并上传到服务器和保存到用户本地(以打开新链接的方式)
            $.ajax({
                //服务器处理程序
                //待修改：需要返回表示上传是否成功的字段：statu
                url: '/img/addDesignImg',
                type: 'POST',
                dataType: 'json',
                data: {
                    'whole': wholeImg,
                    'part': partImg,
                    'title': head,
                    'desc': desc,
                    'sort': sort
                }
            })
            .done(function(data) {
                if (data.statu == 1) {
                    $('.submit-bar').hide('fast');
                    $('.submit-clear').show('fast');
                }
            })
            .fail(function(data) {
                console.log("de1 error");
                $('.submit-bar').hide('fast');
                $('.submit-fail').show('fast');
            });

            //触发上传等待事件
            $('.ds-finish').trigger('uploadProgress');
        });

        //发布按钮绑定上传等待事件
        $('.ds-finish').on('uploadProgress', function() {
            $('.add-desc').hide('fast');
            $('.submit-bar').show('fast'); 
        });

        //上传失败按钮
        $('.de-fail').on('click', function(){
            $('.submit-fail').hide('fast');
            $('.ds-finish').trigger('click');
        });

        $('.fail-close').on('click', function(event) {
            event.preventDefault();
            $('#zhezhao').hide();
            $('.submit-fail').hide('fast');
        });

        //重新设计
        $('#ds-new').on('click', function (event) {
            reDraw(); 
        });

        function reDraw() {
            var wholeCanvas = document.getElementById('cv-whole'),
                wholeContext = wholeCanvas.getContext('2d'),
                partCanvas = document.getElementById('cv-part'),
                partContext = partCanvas.getContext('2d');
                
            wholeContext.clearRect(0, 0, 541, 615);
            partContext.clearRect(0, 0, 200, 300);
            $('#f-upload')[0].files[0] = null;
            $('.ds-imgup').attr('src', '');
            $('#f-upload')[0].value = '';
        }
    
});